<template>
    <div class="app-container">
        <div style="margin-bottom: 10px;">
            <el-button @click="dialogVisible = true" type="primary" size="mini" icon="el-icon-download">
                导⼊Excel
            </el-button>
            <el-button @click="exportData" type="primary" size="mini" icon="el-icon-upload2">
                导出Excel
            </el-button>
        </div>
        <el-dialog title="数据字典导⼊" :visible.sync="dialogVisible" width="3
   0%">
            <el-form>
                <el-form-item label="请选择Excel⽂件">
                    <el-upload :auto-upload="true" :multiple="false" :limit="1" :on-exceed="fileUploadExceed"
                        :on-success="fileUploadSuccess" :on-error="fileUploadError"
                        :action="BASE_API + '/admin/core/dict/import'" name="file"
                        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">
                    取消
                </el-button>
            </div>
        </el-dialog>
        <!--显示字典列表-->
        <el-table :data="list" style="width: 100%" row-key="id" lazy border :load="load">
            <el-table-column label="名称" align="left" prop="name" />
            <el-table-column label="编码" prop="dictCode" align="center" />
            <el-table-column label="值" align="center" prop="value" />
        </el-table>
    </div>
</template>
<script>
import dictApi from '@/api/core/dict'
export default {
    // 定义数据
    data() {
        return {
            dialogVisible: false, //⽂件上传对话框是否显示
            BASE_API: process.env.VUE_APP_BASE_API, //获取后端接⼝地址
            list:[], 
        }
    },
    created(){
        this.findByPid(1)
    },
    methods: {

        //1. 根据父id查询出一级分类字黄
      findByPid(pid){
        dictApi.findByPid(pid).then(resp => {
          this.list = resp.data.list
        })
      },
      // 懒加载
      load(row, treeNode, resolve){
        dictApi.findByPid(row.id).then(resp => {
          resolve(resp.data.list)
        })
      },
        // 上传多于⼀个⽂件时
        fileUploadExceed() {
            this.$message.warning('只能选取⼀个⽂件')
        },
        //上传成功回调
        fileUploadSuccess(response) {
            if (response.code === 0) {
                this.$message.success('数据导⼊成功')
                this.dialogVisible = false
            } else {
                this.$message.error(response.message)
            }
        },
        //上传失败回调
        fileUploadError(error) {
            this.$message.error('数据导⼊失败')
        },
        exportData() {
            window.location.href = this.BASE_API + '/admin/core/dict/export'
        }
    }
}
</script>